<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>你好， {{name}}</h1>

    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    // new Vue({
    //     el:'#root',
    //     data:{
    //         name:'jack'
    //     }
    // })


    //el的两种写法
    //el是提前就想好要挂载到哪个元素上，$mount是过一会想好要挂载到哪个元素上
    // const x = new Vue({
    //     // el:'#root',
    //     data:{
    //         name:'jack'
    //     }
    // })
    // console.log(x)
    // // setTimeout(()=>{
    // //     x.$mount('#root')
    // // },1000);
    // x.$mount('#root')

    //data的两种写法
    //第一种写法：对象
    // new Vue({
    //     el:'#root',
    //     data:{
    //         name:'jack'
    //     }
    // })

    //第二种写法：函数
    new Vue({
        el:'#root',
        // data:function(){
        //     console.log(this);   //this指向vue实例，此处需要为普通函数，不能为箭头函数，箭头函数this指向window
        //     return {
        //         name:'jack'
        //     }
        // }

        data(){
            return{
                name:'jack'
            }
        }
    })
</script>
</html>